<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GGB-VR-TEST</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>

<body onload="init()">
    <script src="build/three.min.js"></script>
    <script src="build/TrackballControls.js"></script>
    <!-- <script src="build/OrbitControls.js"></script> -->

    <script >
        // import { OrbitControls } from './build/OrbitControls.js'
        // 声明变量
        let renderer = "" // 声明渲染器
        let camera = "" // 相机
        let scene = "" // 场景
        let geometry = "" //几何体
        let material = "" //材质
        let mesh = "" //网格
        let controls = "" //相机控件
        let raycaster = new THREE.Raycaster() //射线拾取
        let mouse = new THREE.Vector2() // 鼠标位置
        let spriteArrow = "" //箭头精灵对象
        let sixFace = [] //房间留个面
      
        // 初始化函数
        const init = () => {
            // 初始化渲染器
            initRenderer();
            // 初始化场景
            initScene();
            // 初始化相机
            initCamera();
            // 初始化网格模型
            initMesh();
            // 初始化动画
            animate();
        }

        // 初始化渲染器
        const initRenderer = () => {
            renderer = new THREE.WebGLRenderer()
            // 设置窗口的宽高
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
        }
        // 初始化场景
        const initScene = () => {
            scene = new THREE.Scene();
            // 世界坐标系
            // let axesHelper = new THREE.AxesHelper(500)
            // scene.add(axesHelper)
        }

        // 初始化相机
        const initCamera = () => {
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1100)
            camera.position.set(0, 0, 10)
            // 创建相机控件
            // controls =new OrbitControls(camera, renderer.domElement);
            controls = new THREE.TrackballControls(camera, renderer.domElement);

            // 控制相机方位
            controls.minDistance = 0;
            controls.maxDistance = 200;
        }

        // 创建模型
        const initMesh = () => {
            // let texture = new THREE.TextureLoader().load("img/timg.png")
            // let spriteMaterial = new THREE.SpriteMaterial({
            //     map: texture,
            //     useScreenCoordinates: false
            // })
            // spriteArrow = new THREE.Sprite(spriteMaterial)
            // spriteArrow.scale.set(4, 8, 1)
            // spriteArrow.position.set(-30, -50, -190)
            // scene.add(spriteArrow)
            new THREE.TextureLoader().load('img/timg.png', function (texture) {
                var spriteMaterial = new THREE.SpriteMaterial(
                    { map: texture, useScreenCoordinates: false });
                spriteArrow = new THREE.Sprite(spriteMaterial);
                spriteArrow.scale.set(4, 8, 1);
                spriteArrow.position.set(-30, -50, -190)
                scene.add(spriteArrow)
            });
            //   创建房间6个面
            sixFace = createFace(0)
            //   六个面加入场景中
            for (let i = 0; i < 6; i++) {
                scene.add(sixFace[i])
            }

        }
        // 运行动画
        const animate = () => {
            requestAnimationFrame(animate);
            // 刷新相机控件
            controls.update()
            renderer.render(scene, camera)
        }

        // 创建立方体的六个面
        const createFace = (imgNum) => {
            let sixface = []
            // 前侧
            let geomerayF = new THREE.PlaneGeometry(400, 400, 32, 32)
            let metarialF = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load('img/' + imgNum + '_f.jpg'),
                side: THREE.DoubleSide
            })
            let planeF = new THREE.Mesh(geomerayF, metarialF)
            planeF.rotation.y = Math.PI
            planeF.position.z = 200
            sixface.push(planeF)

            // 后侧
            let geomerayB = new THREE.PlaneGeometry(400, 400, 32, 32)
            let metarialB = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load('img/' + imgNum + '_b.jpg'),
                side: THREE.DoubleSide
            })
            let planeB = new THREE.Mesh(geomerayB, metarialB)
            planeB.position.z = -200
            sixface.push(planeB)

            // 左侧
            let geomerayL = new THREE.PlaneGeometry(400, 400, 32, 32)
            let metarialL = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load('img/' + imgNum + '_l.jpg'),
                side: THREE.DoubleSide
            })
            let planeL = new THREE.Mesh(geomerayL, metarialL)
            planeL.rotation.y = -0.5 * Math.PI
            planeL.position.x = 200
            sixface.push(planeL)

            // 右侧
            let geomerayR = new THREE.PlaneGeometry(400, 400, 32, 32)
            let metarialR = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load('img/' + imgNum + '_r.jpg'),
                side: THREE.DoubleSide
            })
            let planeR = new THREE.Mesh(geomerayR, metarialR)
            planeR.rotation.y = 0.5 * Math.PI
            planeR.position.x = -200
            sixface.push(planeR)

            // 上侧
            let geomerayU = new THREE.PlaneGeometry(400, 400, 32, 32)
            let metarialU = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load('img/' + imgNum + '_u.jpg'),
                side: THREE.DoubleSide
            })
            let planeU = new THREE.Mesh(geomerayU, metarialU)
            planeU.rotation.x = 0.5 * Math.PI
            planeU.rotation.z = Math.PI
            planeU.position.y = 200
            sixface.push(planeU)

            // 下侧
            let geomerayD = new THREE.PlaneGeometry(400, 400, 32, 32)
            let metarialD = new THREE.MeshBasicMaterial({
                map: new THREE.TextureLoader().load('img/' + imgNum + '_d.jpg'),
                side: THREE.DoubleSide
            })
            let planeD = new THREE.Mesh(geomerayD, metarialD)
            planeD.rotation.x = -0.5 * Math.PI
            planeD.rotation.z = Math.PI
            planeD.position.y = -200
            sixface.push(planeD)

            return sixface

        }

        // 场景切换
        const changeScene = () => {
            let six = createFace(14);
            let timmer = setInterval(() => {
                camera.fov -= 1;
                camera.updateProjectionMatrix(); //更新摄像机投影矩阵
                if (camera.fov == 20) {
                    clearInterval(timmer);
                    camera.fov = 50;
                    camera.updateProjectionMatrix();
                    for (let i = 0; i < 6; i++) {
                        scene.remove(sixFace[i])
                    }
                    sixFace=six
                    for (var i = 0; i < 6; i++) {
                        scene.add(sixFace[i]);
                    }
                    // 隐藏指示箭头
                    spriteArrow.visible = false;
                }
            }, 50)
        }

        // 鼠标点击事件
        const mouseClickEvent = () => {
            // 射线捕捉
            raycaster.setFromCamera(mouse, camera);
            let intersects = raycaster.intersectObjects([spriteArrow])
            if (intersects.length > 0) {
                changeScene();
            }
        }
        document.addEventListener('click', mouseClickEvent, false)

        // 窗口变动
        const onWindowResize = () => {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight)
        }
        window.addEventListener('resize', onWindowResize, false)

        // 屏幕坐标实时转世界坐标系
        const mouseMoveEvent = () => {
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
        }

        document.addEventListener('mousemove', mouseMoveEvent, false)



    </script>

</body>

</html>